<title>系统权限 - 数据表格</title>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">数据操作</div>
                <div class="layui-card-body">
                    <table class="layui-hide" id="power_table" lay-filter="power-treeGrid-filter"></table>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    layui.use(['admin', 'treeGrid', 'form', 'view'], function () {
        var $ = layui.$
            , admin = layui.admin
            , form = layui.form
            , view = layui.view
            , treeGrid = layui.treeGrid
            , tableId = "power_table";
        treeGrid.render({
            id: tableId
            , elem: '#' + tableId
            , url: '/sys/power/list'
            , idField: 'id'//必須字段
            , treeId: 'id'//树形id字段名称
            , treeUpId: 'parent'//树形父id字段名称
            , treeShowName: 'powerName'//以树形式显示的字段
            , isFilter: false
            , iconOpen: true//是否显示图标【默认显示】
            , isOpenDefault: true//节点默认是展开还是折叠【默认展开】
            , loading: true
            , method: 'get'
            , isPage: true
            , cols: [[
                {field: 'powerName', title: '权限名称'}
                , {field: 'powerPath', title: '权限路径'}
                , {
                    field: 'powerType', title: '类型', templet: function (d) {
                        if (d.powerType === 0) {
                            return '<span class="layui-badge layui-bg-blue">目录</span>';
                        } else if (d.powerType === 1) {
                            return '<span class="layui-badge-rim">菜单</span>';
                        } else if (d.powerType === 2) {
                            return '<span class="layui-badge layui-bg-gray">按钮</span>';
                        }
                    }
                }
                , {
                    title: '操作', align: 'right'
                    , templet: function (d) {
                        var add = '<a class="layui-btn layui-btn-xs" lay-event="add">添加</a>';
                        var edit = '<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>';
                        var del = '<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>';
                        if (d.parent === "-1") {//父级id
                            return add;
                        } else if (d.parent === "0") {
                            return add + edit + del;
                        } else {
                            return edit + del;
                        }

                    }
                }
            ]]
            , limit: 10
            , limits: [10, 15, 20, 25, 30]
            , text: '对不起，加载出现异常！'
            , parseData: function (res) {//数据加载后回调
                return res;
            }
            , onClickRow: function (index, o) {
                // console.log(index, o, "单击！");
            }
            , onDblClickRow: function (index, o) {
                // console.log(index, o, "双击");
            }
        });

        //监听工具条
        treeGrid.on('tool(power-treeGrid-filter)', function (obj) {
            var data = obj.data;
            if (obj.event === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    admin.req({
                        url: '/sys/power/del'
                        , type: 'post'
                        , data: {ids: data.id}
                        , done: function (res) {
                            layer.msg(res.msg)
                            obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                            layer.close(index);
                        }
                    });
                });
            } else if (obj.event === 'edit') {
                common('编辑权限信息', 'power-content-edit', '/sys/power/update', 'post', data, true);
            } else if (obj.event === 'add') {
                common('添加权限信息', 'power-content-add', '/sys/power/save', 'post', data, false);
            }
        });

        function common(title, id, url, ajaxType, data, isEdit) {
            admin.popup({
                title: title
                , area: ['450px', '550px']
                , id: id
                , success: function (layero, index) {
                    view(this.id).render('sys/power/model').done(function () {
                        //初始化弹框
                        form.render(null, 'power-model-filter');
                        if (isEdit) {
                            if (data.parent === "0") {
                                $("#menu_jump").removeClass("layui-hide");
                            } else {
                                $("#menu_jump").addClass("layui-hide");
                            }
                            //渲染弹框
                            form.val('power-model-filter', data)
                        } else {
                            if (data.parent === "-1") {
                                $("#menu_jump").removeClass("layui-hide");
                            } else {
                                $("#menu_jump").addClass("layui-hide");
                            }
                        }

                        //监听提交
                        form.on('submit(power-submit-filter)', function (rtn) {
                            if (!isEdit) {
                                rtn.field.parent = data.id;
                                if (data.parent !== "-1") {
                                    rtn.field.powerType = 2
                                }
                            }
                            admin.req({
                                url: url
                                , type: ajaxType
                                , data: rtn.field
                                , done: function (res) {
                                    layer.msg(res.msg);
                                    treeGrid.reload(tableId); //重载表格
                                    layer.close(index); //执行关闭
                                }
                            });
                        });
                    });
                }
            });
        }
    });
</script>